<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>合同详情</title>
    <link rel="stylesheet" href="./bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
        }
        .contract-container {
            max-width: 800px;
            margin: 48px auto;
            background: rgba(255,255,255,0.98);
            border-radius: 22px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
            padding: 40px 36px 32px 36px;
            transition: box-shadow 0.3s;
        }
        .contract-header {
            border-bottom: 2px solid #e0e7ff;
            margin-bottom: 32px;
            padding-bottom: 18px;
        }
        .contract-header h2 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #3b3b5c;
            letter-spacing: 2px;
        }
        .contract-info {
            font-size: 1.15rem;
            color: #444;
            line-height: 2.1;
            margin-bottom: 32px;
        }
        .contract-info strong {
            color: #3b3b5c;
            font-weight: 600;
        }
        .contract-section-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 32px 0 18px 0;
            color: #3b3b5c;
            letter-spacing: 1px;
        }
        .contract-content {
            background: #f9fafb;
            border-radius: 14px;
            padding: 24px;
            box-shadow: 0 2px 8px 0 rgba(31, 38, 135, 0.06);
            font-size: 1.08rem;
            color: #333;
        }
        .btn-back {
            margin-top: 24px;
        }
        @media (max-width: 700px) {
            .contract-container { padding: 16px 4px; }
        }
    </style>
</head>
<body>
    <div class="contract-container">
        <div class="contract-header">
            <h2>合同详情</h2>
        </div>
        <!-- 新增企业信息展示 -->
        <div class="contract-info" id="company-info" style="margin-bottom:18px;">
            <div><strong>公司名称：</strong><span id="company-name"></span></div>
            <div><strong>公司编号：</strong><span id="company-id"></span></div>
            <div><strong>法人：</strong><span id="company-legal"></span></div>
            <div><strong>邮箱：</strong><span id="company-email"></span></div>
            <div><strong>手机号：</strong><span id="company-phone"></span></div>
            <div><strong>公司注册时间：</strong><span id="company-join"></span></div>
        </div>
        <div class="contract-info">
            <div><strong>订单号：</strong><span id="order-id"></span></div>
            <div><strong>订单类型：</strong><span id="order-type"></span></div>
            <div><strong>商品名称：</strong><span id="product-name"></span></div>
            <div><strong>下单时间：</strong><span id="order-time"></span></div>
            <div><strong>金额：</strong><span id="order-amount"></span></div>
            <div><strong>状态：</strong><span id="order-status"></span></div>
        </div>
        <div class="contract-section-title">合同正文</div>
        <div class="contract-content" id="contract-content">
            本合同由买卖双方根据《中华人民共和国合同法》及相关法律法规，在平等、自愿、公平和诚实信用的基础上签订。<br>
            <br>
            <strong>商品名称：</strong><span id="contract-product"></span><br>
            <strong>金额：</strong><span id="contract-amount"></span><br>
            <strong>交付时间：</strong><span id="contract-delivery"></span><br>
            <br>
            双方应严格履行合同约定的权利与义务，如有争议，协商解决，协商不成可向合同签订地人民法院提起诉讼。
        </div>
        <button class="btn btn-secondary btn-back" onclick="window.history.back()">返回</button>
        <button class="btn btn-primary btn-back" onclick="window.print()">打印合同</button>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var orderInfo = sessionStorage.getItem('selectedOrder');
        if(orderInfo){
          var data = JSON.parse(orderInfo);
          var order = data.order || {};
          var company = data.company || {};
          // 渲染企业信息
          document.getElementById('company-name').textContent = company.companyName || '';
          document.getElementById('company-id').textContent = company.companyId || '';
          document.getElementById('company-legal').textContent = company.legalPerson || '';
          document.getElementById('company-email').textContent = company.email || '';
          document.getElementById('company-phone').textContent = company.phone || '';
          document.getElementById('company-join').textContent = company.registrationDate || '';
          // 渲染订单信息
          document.getElementById('order-id').textContent = order.orderId || '';
          document.getElementById('order-type').textContent = order.orderType || '';
          document.getElementById('product-name').textContent = order.productName || '';
          document.getElementById('order-time').textContent = order.orderTime || '';
          document.getElementById('order-amount').textContent = order.amount != null ? '¥' + Number(order.amount).toFixed(2) : '';
          document.getElementById('order-status').textContent = order.status || '';
          // 合同正文部分
          document.getElementById('contract-product').textContent = order.productName || '';
          document.getElementById('contract-amount').textContent = order.amount != null ? '¥' + Number(order.amount).toFixed(2) : '';
          document.getElementById('contract-delivery').textContent = order.orderTime || '';
        } else {
          document.querySelector('.contract-container').innerHTML = '<div class="alert alert-danger">未获取到订单信息，请从订单页面进入。</div>';
        }
      });
    </script>
</body>
</html>